import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_demo/core/widgets/common_image_view.dart';
import 'package:flutter_app_demo/core/widgets/overlay_manager.dart';

void showBlurredBottomSheet({
  required BuildContext context,
  required String title,
  required List<BottomSheetItem> items,
  required int? selectedIndex,
  required Function(String, int) onItemSelected,
}) {
  final OverlayState overlayState = Overlay.of(context);
  late OverlayEntry overlayEntry;
  bool isVisible = false;

  overlayEntry = OverlayEntry(
    builder: (context) {
      return Stack(
        children: [
          GestureDetector(
            onTap: () {
              isVisible = false;
              overlayEntry.markNeedsBuild();
              Future.delayed(const Duration(milliseconds: 300), () {
                OverlayManager().removeOverlay(overlayEntry);
              });
            },
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
              child: AnimatedOpacity(
                opacity: isVisible ? 0.5 : 0.0,
                duration: const Duration(milliseconds: 300),
                child: Container(
                  color: const Color(0xFF141414),
                ),
              ),
            ),
          ),
          AnimatedPositioned(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            bottom: isVisible ? 0 : -MediaQuery.of(context).size.height,
            left: 0,
            right: 0,
            child: BottomSheetWidget(
              title: title,
              items: items,
              selectedIndex: selectedIndex,
              onItemSelected: (selectedItem, index) {
                onItemSelected(selectedItem, index);
                isVisible = false;
                overlayEntry.markNeedsBuild();
                Future.delayed(const Duration(milliseconds: 300), () {
                  OverlayManager().removeOverlay(overlayEntry);
                });
              },
              onClose: () {
                isVisible = false;
                overlayEntry.markNeedsBuild();
                Future.delayed(const Duration(milliseconds: 300), () {
                  OverlayManager().removeOverlay(overlayEntry);
                });
              },
            ),
          ),
        ],
      );
    },
  );

  overlayState.insert(overlayEntry);
  OverlayManager().addOverlay(overlayEntry);

  Future.delayed(const Duration(milliseconds: 50), () {
    isVisible = true;
    overlayEntry.markNeedsBuild();
  });
}

class BottomSheetItem {
  final String title;
  final String? subtitle;
  final bool? isSubtitleNumber;
  final String? imageUrl;
  final String? localImageUrl; // 本地图片
  final double fontSize;
  final bool? clickable;
  final double? iconWidth;
  final double? iconHeight;

  BottomSheetItem({
    required this.title,
    this.subtitle,
    this.isSubtitleNumber,
    this.imageUrl,
    this.localImageUrl = '',
    this.fontSize = 16.0,
    this.clickable = true,
    this.iconWidth,
    this.iconHeight,
  });
}

class BottomSheetWidget extends StatelessWidget {
  final String title;
  final List<BottomSheetItem> items;
  final int? selectedIndex;
  final Function(String, int) onItemSelected;
  final VoidCallback onClose;

  const BottomSheetWidget({
    super.key,
    required this.title,
    required this.items,
    required this.selectedIndex,
    required this.onItemSelected,
    required this.onClose,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Container(
        decoration: const BoxDecoration(
          color: Color(0xFF141414),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding:
                  const EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const SizedBox(width: 48),
                  Text(
                    title,
                    style: const TextStyle(fontSize: 20.0, color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
                  IconButton(
                    icon: const Icon(Icons.close, color: Colors.white),
                    onPressed: onClose,
                  ),
                ],
              ),
            ),
            Flexible(
              child: ListView.builder(
                shrinkWrap: true,
                padding: const EdgeInsets.symmetric(vertical: 10.0), // 控制上下内边距
                itemCount: items.length,
                itemBuilder: (context, index) {
                  final item = items[index];
                  return Container(
                    margin: const EdgeInsets.only(
                        left: 16.0, right: 16.0, bottom: 16.0),
                    padding: const EdgeInsets.all(12.0),
                    decoration: BoxDecoration(
                      color: const Color(0xFF262626),
                      borderRadius: BorderRadius.circular(12.0),
                    ),
                    child: ListTile(
                      contentPadding: EdgeInsets.zero,
                      leading:
                          item.imageUrl != null || item.localImageUrl != null
                              ? item.localImageUrl!.isNotEmpty
                                  ? CommonImageView(
                                      imagePath: item.localImageUrl,
                                      width: item.iconWidth ?? 40,
                                      height: item.iconHeight ?? 40)
                                  : CommonImageView(
                                      url: item.imageUrl,
                                      width: item.iconWidth ?? 40,
                                      height: item.iconHeight ?? 40)
                              : null,
                      title: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(left: 10.0),
                            child: Text(
                              item.title,
                              style: TextStyle(
                                  fontSize: item.fontSize,
                                  color: item.clickable == true
                                      ? Colors.white
                                      : const Color(0xFF4F4F4F)),
                            ),
                          ),
                          if (item.subtitle != null &&
                              item.isSubtitleNumber == null)
                            Text(
                              item.subtitle!,
                              style: const TextStyle(
                                  fontSize: 14.0, color: Colors.white70),
                            ),
                        ],
                      ),
                      trailing: selectedIndex == index
                          ? const Icon(Icons.check,
                              size: 20, color: Color(0xFFB6EA2E))
                          : const SizedBox(width: 20),
                      onTap: () {
                        if (item.clickable == true) {
                          onItemSelected(item.title, index);
                        }
                      },
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
